<script setup lang='ts'>
 import utils from "@/utils/index"
 import  firstScreenStore    from '@/store/firstScreenStore'
 import userStore from '@/store/userStore'
 const userinfo=userStore()
  const res_click  =firstScreenStore()

// console.log(userinfo.info);
</script>
<template>

<div class="flex justify-start md:justify-between items-center md:border-none
 border-2 border-b-2 border-gray-400 border-t-0 border-l-0 border-r-0 ">
  <i class="fas fa-bars block md:hidden ml-9 md:ml-0" @click.stop="res_click.change()"></i> 
 <div class="title text-sm md:text-[30px] m-3 text-gray-700 ">
  学易网</div>
  <div class="flex justify-center items-center">
    <!-- 这里面写菜单 -->
                  <!-- v-if="userinfo.info?.user_type==='1'" -->
    <router-link :to="{name:'admin.home'}" v-if="userinfo.info?.user_type==='1'"  class= "  box1 user-login-style !bg-pink-300 ">后台管理</router-link>
    <router-link :to="{name:'rate'}" class=" box1 user-rate-style ">参与评价</router-link>
    <router-link :to="{name:'about'}" class="box1 user-login-style  !bg-purple-400  ">关于我们</router-link>
    <router-link :to="{name:'auth.login'}" v-if="!utils.user.isLogin()" class="box1 user-isnotlogin-style ">用户未登录</router-link>
    <router-link :to="{}" v-else class="box1 user-islogin-style ">用户已登录</router-link>
  </div>
</div>
</template>
<style scoped lang='scss'>

.user-login-style{
    @apply bg-blue-500 text-white  p-3 mr-3 block
         py-2 rounded-md  hover:bg-blue-700 duration-500 text-xs md:text-[15px]
 }
 .user-isnotlogin-style{
    @apply bg-gray-400 text-white  p-3 mr-3 block
         py-2 rounded-md  hover:bg-gray-700 duration-500 text-xs md:text-[15px]
 }
 .user-islogin-style{
    @apply bg-green-400 text-white  p-3 mr-3  block
         py-2 rounded-md   hover:bg-green-700 duration-500 text-xs md:text-[15px]
 }
 
 .user-rate-style{
    @apply  text-white  p-3 mr-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 block
         py-2 rounded-md   duration-500 text-xs md:text-[15px]
 }


 @media screen and (max-width:768px) {
     .box1{
      @apply hidden ;
     }
     .title{
       @apply  text-[30px] ; 
     }
 }
</style>